<template>
  <div class="blog-detail-container">
    <div class="main">
      <div class="blog-content">
        <div class="location">
          当前位置：
          <a @click="onMenuClick('Home', '')">首页</a> >
          <a @click="onMenuClick(blog.blogCategory, blog.blogCategoryName)">{{blog.blogCategoryName}}</a> >
          内容详情
        </div>
        <div class="blog-title">{{blog.blogName}}</div>
        <div class="blog-sup">
          <span>更新时间：{{blog.updateTime}}</span>
          <span>浏览量：{{blog.blogView}}</span>
          <span>推荐指数：
            <el-rate
                    v-model="blog.blogRate"
                    :colors="colors"
                    disabled
                    show-score
                    score-template="{value} 星"
                    text-color="#ff9900"
                    style="display: inline-block;">
            </el-rate>
          </span>
        </div>
        <div class="blog-desc" v-if="blog.blogDes">{{blog.blogDes}}</div>
        <!-- 5号广告位 -->
        <div class="ad-body" v-if="bodyAd" @click="openUrl(bodyAd.adLink)" :style="`backgroundImage: url(${bodyAd.adPic})`" />
        <!-- 博客内容 -->
        <div class="blog-detail markdown-body editormd-preview-container" v-html="blog.blogHtml" />
      </div>
      <!-- 6号广告位 -->
      <div class="ad6-wrap" v-if="ad6">
        <div class="title">获取资源</div>
        <div class="content-wrap">
          <img :src="ad6.adPic" />
          <div style="color: #0000FF">看到这里，说明本帖的内容对您很有帮助，如果您想要获取与本帖相关的全部资料，可以通过如下方式获得：</div>
          <div style="color: #000;font-weight:bold;">&lt;== 扫码关注左边【 <span style="color: red;">{{ad6.adRemark}}</span> 】公众号，输入关键词"<span style="color: red;">{{blog.blogNo}}</span>" 即可获得</div>
          <div style="color: #0000FF"><span style="color: red;">希望你我的一次相遇，能让你从此爱上Java项目实战网！</span></div>
        </div>
      </div>
    </div>
    <div class="right">
      <!-- 广告位3 -->
      <Card class="card-item" v-if="ad7" :desc="ad7.adRemark" :image="ad7.adPic" :link="ad7.adLink" />
      <RecommendList
              class="card-item"
              :data="recommendList"
      />
      <!-- 广告位4 -->
      <Card class="card-item padding" title="关注公众号" v-if="ad8" :desc="ad8.adRemark" :image="ad8.adPic" :link="ad8.adLink" />
    </div>
  </div>
</template>

<script>
import Card from '../../components/Card.vue';
import RecommendList from '../../components/RecommendList.vue';
import { getAdByType, getBlogDetailById, getBlog } from '../../api/index';

export default {
  name: 'BlogDetail',
  components: { Card, RecommendList },
  data() {
    return {
      bodyAd: null,
      ad6: null,
      ad7: null,
      ad8: null,
      blog: {
        blogId: '',
        blogName: '',
        updateTime: '',
        blogView: 0,
        blogDes: '',
        blogHtml: '',
        blogCategory: '',
        blogCategoryName: '',
        blogRate: 0
      },
      recommendList: [],
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
    };
  },
  methods: {
    // 获取5号广告位
    getBodyAd() {
      getAdByType('XQ_ZB').then(res => {
        if (res.data.length && res.data[0].adPic) {
          this.bodyAd = res.data[0];
          this.bodyAd.adPic = res.data[0].adPic.split(',')[0];
          this.bodyAd.adLink = res.data[0].adLink.split(',')[0];
        }
      });
    },
    // 获取6号广告位
    getAd6() {
      getAdByType('XQ_DB').then(res => {
        if (res.data.length && res.data[0].adPic) {
          this.ad6 = res.data[0];
          this.ad6.adPic = res.data[0].adPic.split(',')[0];
          this.ad6.adLink = res.data[0].adLink.split(',')[0];
          this.ad6.adRemark = this.ad6.adRemark.replace(/{(.+?)}/g, target => {
            const key = target.replace(/{/g, '').replace(/}/g, '');
            return this.blog[key] || '';
          });
        }
      });
    },
    // 获取7号广告位
    getAd7() {
      getAdByType('XQ_CDB').then(res => {
        if (res.data.length && res.data[0].adPic) {
          this.ad7 = res.data[0];
          this.ad7.adPic = res.data[0].adPic.split(',')[0];
          this.ad7.adLink = res.data[0].adLink.split(',')[0];
        }
      });
    },
    // 获取8号广告位
    getAd8() {
      getAdByType('XQ_CZB').then(res => {
        if (res.data.length && res.data[0].adPic) {
          this.ad8 = res.data[0];
          this.ad8.adPic = res.data[0].adPic.split(',')[0];
          this.ad8.adLink = res.data[0].adLink.split(',')[0];
        }
      });
    },
    // 查询博客详情
    getBlogDetail() {
      getBlogDetailById(this.blog.blogId).then(res => {
        this.blog = res.data;
        document.querySelector('title').innerText = this.blog.blogName + '-java项目实战网';
        this.getAd6();
        // 根据分类查询相关博客
        getBlog({
          page: 1,
          limit: 20,
          type: this.blog.blogCategory
        }).then(res => {
          // 把当前的博客从list中去掉
          let tmpList = [];
          res.data.forEach(item => {
            if (item.blogId !== this.blog.blogId) {
              tmpList.push(item);
            }
          });
          this.recommendList = tmpList;
        });
      });
    },

    openUrl(link) {
      if (link) window.open(link);
    },

    onMenuClick(code, value) {
      if (code !== 'Home') {
        this.$router.push({
          name: 'Blogs',
          query: {code, value}
        });
      } else {
        this.$router.push({ name: 'Home' });
      }
    }
  },
  mounted() {
    const query = this.$route.query;
    this.blog.blogId = query.blogId;
    // 查询广告位
    this.getBodyAd();
    this.getAd7();
    this.getAd8();
    this.getBlogDetail();
  }
}
</script>

<style lang="scss" scoped>

.blog-detail-container {
  display: flex;
  padding: 16px 10%;
}

.main {
  flex: 1;
}

.right {
  width: 300px;
  padding-left: 16px;
}

.blog-content {
  padding: 16px;
  border-bottom: 16px;
  border-radius: 5px;
  background-color: #fff;  
  margin-bottom: 16px;
}

.ad-body {
  width: 100%;
  height: 0;
  padding-top: 12.5%;
  border-radius: 5px;
  margin-bottom: 16px;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.table-item, .card-item {
  margin-bottom: 16px;
}

.location {
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;

  a:hover {
    cursor: pointer
  }
}

.blog-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 2;
}

.blog-sup {
  color: #8c8c8c;
  line-height: 2;
}

.blog-sup > span {
  margin-right: 24px;
}

.blog-desc {
  margin: 16px 0;
  padding: 8px;
  border-left: 4px solid #009a61;
  background-color: #f0f9eb;
  line-height: 2;
}

.blog-detail {
  border-top: 1px solid #f0f0f0;
  position: relative;
  padding: 16px 0;
}

.ad6-wrap {
  width: 100%;
  padding: 16px;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;

  .title {
    font-size: 16px;
    line-height: 40px;
    font-weight: bold;
    border-bottom: 1px solid #f0f0f0;
  }

  .content-wrap {
    line-height: 3;
    font-size: 16px;
    margin: 8px 0;
    border: solid 1px #FFBB76;
    background: #FFFCEF;
    padding: 16px;
    overflow: hidden;

    img {
      float: left;
      vertical-align: top;
      width: 200px;
      height: 200px;
      margin-right: 16px;
    }
  }
}
.padding {
  padding: 0 16px;
}
</style>
